<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>sign</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/button_demo1.css">
</head>

<body>
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        login & signup
        <small>page</small>
    </h1>
</section>

<section class="content  col-lg-3 col-xs-12" id="login_index">
    <div class="box">
        <%--<div class="box-header with-border"></div><!-- /.box-header -->--%>
        <div class="box-body">
            <div class="row">

                <div class="col-lg-12  col-xs-12">
                    <label class="username_input" for="username_input">username:</label>
                    <input type="text" class="form-control" id="username_input_login">
                </div>

                <div class="col-lg-12  col-xs-12">
                    <label class="password_input" for="password_input">password:</label>
                    <input type="password" class="form-control" id="password_input_login">
                </div>
            </div>

            <br/>

            <div class="row">
                <div class="col-lg-6  col-xs-6">
                    <b class="form-control a_demo_two" onclick="login();">login</b>
                </div>

                <div class="col-lg-6  col-xs-6">
                    <b class="form-control a_demo_two" onclick="signup_index()">sign
                        up</b>
                </div>
            </div>

        </div>
    </div>
</section>

<section class="content  col-lg-3 col-xs-12" id="signup_index">
    <div class="box">
        <%--<div class="box-header with-border"></div><!-- /.box-header -->--%>
        <div class="box-body">
            <div class="row">

                <div class="col-lg-12  col-xs-12">
                    <label>用户名:*</label>
                    <input type="text" class="form-control" id="username_input">
                </div>

                <div class="col-lg-12  col-xs-12">
                    <label>密码:*</label>
                    <input type="password" class="form-control" id="password_input">
                </div>

                <div class="col-lg-12  col-xs-12">
                    <label>密码确认:*</label>
                    <input type="password" class="form-control" id="password2_input">
                </div>

                <div class="col-lg-12  col-xs-12">
                    <label>手机号:*</label>
                    <input type="text" class="form-control" id="phonenumber_input"
                           onKeyUp="value=value.replace(/\D/g,'')"
                           onafterpaste="value=value.replace(/\D/g,'')">
                </div>

                <div class="col-lg-12  col-xs-12">
                    <label>其他:</label>
                    <input type="text" class="form-control" id="note_input">
                </div>

            </div>

            <br/>

            <div class="row">
                <div class="col-lg-8  col-xs-8 col-lg-offset-4 col-xs-offset-4">
                    <b class="form-control a_demo_two" onclick="signup();">确认注册</b>
                </div>
            </div>
        </div>
    </div>

</section>

<script>
    function signup() {
        get_ip();

        if ($("#password_input").val() != $("#password2_input").val()) {
            alert("两次密码不一样");
            return;
        }

        if (!/^\w{4,16}$/.test($("#username_input").val())) {
            $("#username_input").prev().text("用户名:用户名长度6-16位");
            return
        } else {
            $("#username_input").prev().text("用户名:*");
        }

        if (!/^\w{4,16}$/.test($("#password_input").val())) {
            $("#password_input").prev().text("密码:密码长度6-16位");
            return
        } else {
            $("#password_input").prev().text("密码:*");
        }

        if (!/^1[3|4|5|8][0-9]\d{8}$/.test($("#phonenumber_input").val())) {
            $("#phonenumber_input").prev().text("手机号:手机号输入错误");
            return
        } else {
            $("#phonenumber_input").prev().text("手机号:*");
        }

        if (!/^\w{0,100}$/.test($("#note_input").val())) {
            $("#note_input").prev().text("其他:长度0-100位");
            return
        } else {
            $("#note_input").prev().text("其他:");
        }

        var send_data = {
            username: $("#username_input").val(),
            password: $("#password_input").val(),
            phonenumber: $("#phonenumber_input").val(),
            note: $("#note_input").val(),
            ip: ip
        };
        var send_json_data = (JSON.stringify(send_data));

        $.ajax({
            type: 'POST',
            url: "/sign/signup.inner",
            contentType: 'application/json',
            dataType: "json",
            data: send_json_data,
            timeout: 10000,
            success: function (data) {
                var dataObj = eval(data);
                alert(dataObj.register);
                window.location.href="/sign/index";
            }
        });
    }
</script>

<script>
    function login() {
        get_ip();

        var send_data = {
            username: $("#username_input_login").val(),
            password: $("#password_input_login").val(),
            ipAddress: ip
        };
        send_json_data = (JSON.stringify(send_data));

        $.ajax({
            type: 'POST',
            url: "/sign/login.inner",
            contentType: 'application/json',
            dataType: "json",
            data: send_json_data,
            timeout: 10000,
            success: function (data) {
                var dataObj = eval(data);
                alert(dataObj.status);
                if (dataObj.status == "loginOk") {
                    window.location.href = "/";
                }
            }
        });
    }
</script>

<script>
    var ip;

    $(document).ready(function () {
        $("#signup_index").hide();
    });

    function signup_index(){
        $("#login_index").hide();
        $("#signup_index").show();
    }

    function get_ip() {
        var url = 'http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_=' + Math.random();
        $.ajax({
            type: 'GET',
            url: url,
            dataType: "json",
            timeout: 10000,
            success: function (data) {
                var dataObj = eval(data);
                ip = dataObj.Ip;
            }
        });
    }
</script>

</body>
</html>
